<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <style>
       html body{
            height: 100%;
        }
        .head {
            height: 45px;
            background-color: #252B3A;

        }
        .foot {
            width: 100%;
            background-color: #252B3A;
            height: 45px;

        }
        .content {
            min-height: 770px;
            background-image: url("https://console-static.huaweicloud.com/static/authui/20200604224026/public/custom/images/loginbackground_hc.jpg");
        }
        .banner{
            margin: 0px 20px;
            padding-top: 10px;
        }
        .but{
            float: right;
            color: #A0A2A8;
        }
        .login{
            float: right;
            margin-top: 70px;
            margin-right: 300px;
            background-color: white;
            width: 380px;
            font-size: 14px;
            border-color: rgba(228,228,228,1);
            border-radius: 0;
        }
        a{
            color: white;!important;
        }
       .layui-input-inline{
           width: 330px;!important;
       }
    </style>
</head>

<body>
<script src="/static/js/jquery-1.8.0.min.js"></script>
<script src="/static/layui/layui.all.js"></script>
    <div class="head">
        <div class="banner"><a href="javascript:void(0)"><img src="https://console-static.huaweicloud.com/static/authui/20200604224026/public/custom/images/logo.svg"></a>
            <div class="but">
                <a href="javascript:void(0)">首页</a>
                <a href="javascript:void(0)">帮助中心</a>
                <a href="javascript:void(0)">云社区</a>
            </div></div>

    </div>
    <div class="content">
        <div class="login">
            <div style="height: 50px">
                <h3 style="text-align: center;margin-top: 40px">账号登录</h3>
            </div>
            <form class="layui-form" >
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginName" lay-verify="required|title" autocomplete="off" placeholder="请输入账号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="password" name="passWord" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div style="width: 216px; margin: 80px;">
                    <button class="layui-btn layui-btn-fluid" lay-filter="login" lay-submit>登录</button>
                    <a class="layui-btn layui-btn-fluid" href="/register" style="margin-top: 10px;margin-left: 0px">注册</a>
                </div>
            </form>
        </div>

    </div>
    <div class="foot"></div>
<script>
    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(login)', function(data){
           var loginName = data.field.loginName;
           var passWord = data.field.passWord;
            $.ajax({
               url:"/login",
               data:{
                   loginName:loginName,
                   passWord:passWord
               },
                success:function (datas) {
                    if (datas.code=='0'){
                       layer.msg(datas.msg);
                   }else{
                       window.location.href="/mainIndex";
                   }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>
</body>
</html>